<template>
    <view class='list'>

        <view v-for="item,idx in list" :key="idx" class="list-i">
            <view class="img">
                <image class="" :src="item.assCommentHeadImg" mode="aspectFit" lazy-load="false" binderror="" bindload="" />
            </view>
            <view class="right">
                <view class="name">
                    {{ item.commentUserName }}
                </view>
                <view class="time">
                    {{ item.createTime }}
                </view>
                <view class="info">
                    {{ item.commentContent }}
                </view>
                <view class="pics" v-if="item.commentPicture" :class="item.picStyle">
                    <image v-for="pItem,idx2 in item.commentPics" class="" :src="pItem" mode="" lazy-load="false" @click="previewImage(idx2,item.commentPics)" />
                </view>

            </view>

        </view>

    </view>
</template>
  <script>
export default {

    props: {
        list: {
            default: () => [],
        },

    },
    data () {
        return {

        }
    },
    computed: {

    },

    mounted () {

    },
    methods: {
        previewImage (ids,arr) {
            uni.previewImage({
                current: ids,
                urls: arr
            })
        }

    }
};
  </script>
  <style lang="scss" scoped >
.list {
    .list-i {
        padding: 20rpx 0;
        display: flex;
        border-bottom: 1rpx solid #f6f6f6;
        .img {
            margin-right: 20rpx;
            width: 84rpx;
            height: 84rpx;
            border: 1rpx solid #eaeaea;
            border-radius: 50%;
            overflow: hidden;
            text-align: center;
            font-size: 0;
            image {
                width: 100%;
                height: 100%;
                // margin: 5% auto;
            }
        }
    }
    .right {
        flex: 1;
        .name {
            color: #333;
            font-size: 30rpx;
            line-height: 1.5;
        }
        .time {
            font-size: 22rpx;
            color: #999;
            margin: 6rpx 0 20rpx;
        }
        .info {
            line-height: 1.5;
            font-size: #565656;
            font-size: 26rpx;
        }
    }
    .pics {
        padding: 20rpx 0 0;
        image {
            display: inline-block;
            vertical-align: top;
            width: 110rpx;
            height: 110rpx;
            margin: 5rpx 10rpx;
        }
        &.middle {
            image {
                width: 150rpx;
                height: 150rpx;
            }
        }
        &.big {
            image {
                width: 220rpx;
                height: 220rpx;
            }
        }
    }
}
</style>
  